<!----------------引入头部文件-------------------->
<include file="Common/title" />
<!-----------------mui初始化------------------------>
<script type="text/javascript">
    mui.init()
</script>
    <style>
        html,
        body {
            background-color: #efeff4;
        }

        span.mui-icon {
            font-size: 14px;
            color: #007aff;
            margin-left: -15px;
            padding-right: 10px;
        }
        .mui-off-canvas-right {
            color: #fff;
        }
        .title {
            margin: 35px 15px 10px;
        }
        .title+.content {
            margin: 10px 15px 35px;
            color: #bbb;
            text-indent: 1em;
            font-size: 14px;
            line-height: 24px;
        }
        input {
            color: #000;
        }
        .val{
            color:#fe6c00;
        }
        .ultype{
            margin:1px 0 8px;
        }
        .p1{
            font-size:0.7em;
        }
        .cat{
            margin:0;
            background:white;
        }
        .imgs{
            padding-left:6px;
        }
        .mui-card-footer a{
            color:white;
        }
        .gd{
            display:none;
        }
        .btn-left{
            width:30%;
            float:left;
            margin-left:15%;
        }
        .btn-right{
            width:30%;
            float:right;
            margin-right:15%;
        }
    </style>
</head>

<body>
<!--侧滑菜单容器-->
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-slide-in">
    <!--菜单部分-->
    <aside id="offCanvasSide" class="mui-off-canvas-right" >
        <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <div class="title">筛选</div>
                <form class="mui-input-group" action="__ACTION__" method="get" id="form1">
                    <input type="hidden" name="flno" value="<?php echo $flno; ?>">
                    <input type="hidden" name="flmc" value="<?php echo $flmc; ?>">
                    <!--------------型号筛选数据--------------->
                    <div class="mui-card-footer mui-table-view-inverted main">
                        <a class="mui-card-link">型号</a>
                        <a class="mui-card-link gdclick" ><?php if(count($filterinfo['xh_gys']['xh'])>5) echo '更多';?></a>
                    </div>
                    <ul class="mui-table-view mui-table-view-inverted uli">
                        <?php $xh_gys = I('get.xh_gys');
                            $arr = [];
                            foreach($xh_gys as $g=>$h){
                                    foreach($h as $a=>$b){
                                        $arr[] = $b;
                                    }
                                }
                        foreach($filterinfo['xh_gys']['xh'] as $k=>$v){
                            if($arr && in_array($v,$arr)){
                                $checked = "checked='checked'";
                            }else{
                                $checked = '';
                            }
                        if($k <5){ ?>
                            <li class="mui-table-view-cell mui-checkbox mui-left">
                                <input name="xh_gys[xh][]" value="<?php echo $v; ?>" type="checkbox" <?php echo $checked; ?>><?php echo $v; ?>
                            </li>
                        <?php }else{ ?>
                            <li class="mui-table-view-cell mui-checkbox mui-left gd">
                                <input name="xh_gys[xh][]" value="<?php echo $v; ?>" type="checkbox" <?php echo $checked; ?>><?php echo $v; ?>
                            </li>
                        <?php }} ?>
                    </ul>
                    <!-------------供应商筛选数据--------------->
                    <div class="mui-card-footer mui-table-view-inverted main">
                        <a class="mui-card-link">供应商</a>
                        <a class="mui-card-link gdclick" ><?php if(count($filterinfo['xh_gys']['gys'])>5) echo '更多';?></a>
                    </div>
                    <ul class="mui-table-view mui-table-view-inverted uli">
                        <?php
                        foreach($filterinfo['xh_gys']['gys'] as $k=>$v){
                            if($arr && in_array($v['gys'],$arr)){
                                $checked = "checked='checked'";
                            }else{
                                $checked = '';
                            }
                        if($k < 5){ ?>
                            <li class="mui-table-view-cell mui-checkbox mui-left">
                                <input name="xh_gys[gysno][]" value="<?php echo $v['gys']; ?>" type="checkbox" <?php echo $checked; ?> ><?php echo $v['qc']; ?>
                            </li>
                        <?php }else{ ?>
                            <li class="mui-table-view-cell mui-checkbox mui-left gd">
                                <input name="xh_gys[gysno][]" value="<?php echo $v['gys']; ?>" type="checkbox" <?php echo $checked; ?> ><?php echo $v['qc']; ?>
                            </li>
                        <?php }} ?>
                    </ul>

                    <!--------------属性筛选数据--------------->
                    <?php  foreach($filterinfo['sx'] as $k=>$v){
                            $sx = I('get.sx')[$v['sxno']];
                    ?>
                    <div class="mui-card-footer mui-table-view-inverted main">
                        <a class="mui-card-link"><?php echo $v['sxmc']; ?></a>
                        <a class="mui-card-link gdclick" ><?php if(count($v['sxz'])>5) echo '更多';?></a>
                    </div>
                    <ul class="mui-table-view mui-table-view-inverted uli">
                        <?php foreach($v['sxz'] as $k1=>$v1){
                            if($sx && in_array($v1,$sx)){
                                $checked = "checked='checked'";
                            }else{
                                $checked = '';
                            }
                        if($k1 < 5){ ?>
                            <li class="mui-table-view-cell mui-checkbox mui-left">
                                <input name="sx[<?php echo $v['sxno']; ?>][]" value="<?php echo $v1; ?>" type="checkbox" <?php echo $checked; ?> ><?php echo $v1; ?>
                            </li>
                        <?php }else { ?>
                            <li class="mui-table-view-cell mui-checkbox mui-left gd">
                                <input name="sx[<?php echo $v['sxno']; ?>][]" value="<?php echo $v1; ?>" type="checkbox" <?php echo $checked; ?> ><?php echo $v1; ?>
                            </li>
                        <?php }} ?>
                    </ul>
                    <?php } ?>

                    <div class="mui-content-padded btn">
                        <button id="reset" type="button" class="mui-btn mui-btn-danger btn-left" >重置</button>
                        <button id="offCanvasHide" type="submit" class="mui-btn mui-btn-danger btn-right" >确认</button>
                    </div>
                </form>
            </div>
        </div>
    </aside>
    <div class="mui-inner-wrap">
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
            <a  href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a>
            <h1 class="mui-title"><?php echo $flmc; ?></h1>
        </header>
        <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll">
                <button id="offCanvasShow" style="display:none" type="button" class="mui-btn mui-btn-primary mui-btn-block" style="padding: 5px;">
                    显示侧滑菜单
                </button>
                <div id="info">
                    <?php if(!$info){ ?>
                    <ul class=" mui-table-view mui-table-view-striped mui-table-view-condensed ultype">
                        <li class="mui-table-view-cell" >
                            <div class="mui-table">
                                <div class="mui-table-cell mui-col-xs-10">
                                    <a href="javascript:void(0);" style="color:black">该分类下暂无单品或者根据筛选条件没有查询到数据！</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <?php }else{ foreach($info as $k=>$v){ ?>
                    <ul wzno="<?php echo $v['wzno']; ?>" class=" mui-table-view mui-table-view-striped mui-table-view-condensed ultype">
                        <li class="mui-table-view-cell" >
                            <div class="mui-table">
                                <div class="mui-table-cell mui-col-xs-10">
                                    <a href="javascript:void(0);" style="color:black"><?php echo $v['wzmc']; ?></a>
                                    <p class="mui-h6 mui-ellipsis p1">型号　　　: <span class="val"><?php echo $v['dhbs'][0]; ?></span></p>
                                    <p class="mui-h6 mui-ellipsis p1">质量等级　: <span class="val"><?php echo $v['dhbs'][1]; ?></span></p>
                                    <p class="mui-h6 mui-ellipsis p1">型号规格　: <span class="val"><?php echo $v['dhbs'][2]; ?></span></p>
                                    <p class="mui-h6 mui-ellipsis p1">供货商　　: <span class="val"><?php echo $v['qc']; ?></span></p>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <?php }} ?>
                </div>
                <div class="mui-content-padded cat" id="jz" style="display:block" >
                    <button  onclick="jiazai();" type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined">加载更多</button>
                </div>
                <div style="height:50px;border:1px solid #EFEFF4"></div>
            </div>
        </div>
        <!-- off-canvas backdrop -->
        <div class="mui-off-canvas-backdrop"></div>
    </div>

    <!-------------底部导航开始---------------->
    <include file="Common/nav"/>

</div>
<script>
    var flno = '{$flno}';//分类编码id
    var offset = '{$offset}';//取的数据总条数
    offset = parseInt(offset);//把字符串类型转换成数字
    var zong_tiaoshu = '{$count}'; //数据的总条数
    zong_tiaoshu = parseInt(zong_tiaoshu);//把字符串类型转换成数字
    var info = '{$info}';  //数据集
    var key = '{$key}'//点击加载条件筛选的物资ID

    //点击每个系列跳转函数
    function abc(){
        var wzno = this.getAttribute('wzno');
        window.location.href = "<?php echo U('Index/detail','',false);?>/wzno/"+wzno;
    }

    //点击筛选条件里的更多展开所有条件并隐藏更多---函数
    function gd_click(){
        var gd = $(this).parent().next().find('.gd');
        var html = $(this).html();
        if(html  == '更多'){
            gd.css('display','block');
            $(this).html('收起');
        }else if(html  == '收起'){
            gd.css('display','none');
            $(this).html('更多');
        }
    }

    //点击加载获取更多系列函数
    function jiazai(){
        var div_html = document.getElementById('info').innerHTML;
        //console.log(cpxlnos);
        mui.post('__CONTROLLER__/ajax_filter_getcatoffsetwxbm',{
            offset:offset,key:key
        },function(vs){
            //console.log(vs);return;
            var data = vs.info;
            var html = '';
            for(var i=0;i<data.length;i++){
                html += '<ul wzno="'+data[i].wzno+'" class="mui-table-view mui-table-view-striped mui-table-view-condensed ultype"><li class="mui-table-view-cell" ><div class="mui-table"><div class="mui-table-cell mui-col-xs-10"><a href="javascript:void(0);" style="color:black">'+data[i].wzmc+'</a><p class="mui-h6 mui-ellipsis p1">编号　　：<span class="val">'+data[i].wzno+'</span></p><p class="mui-h6 mui-ellipsis p1">型号 : 　　<span class="val">'+data[i].dhbs[0]+'</span></p><p class="mui-h6 mui-ellipsis p1">质量等级：<span class="val">'+data[i].dhbs[1]+'</span></p><p class="mui-h6 mui-ellipsis p1">型号规格：<span class="val">'+data[i].dhbs[2]+'</span></p><p class="mui-h6 mui-ellipsis p1">供货商　：<span class="val">'+data[i].qc+'</span></p></div></div></li></ul>';
            }
            document.getElementById('info').innerHTML = div_html+html;
            offset = vs.offset; //把ajax返回的条数更新

            //判断如果取的条数已经大于或等于总条数,加载按钮隐藏
            if(offset >= zong_tiaoshu){
                $('#jz').css('display','none');
            }
        },'json');
    }

    // -------------------   页面加载完毕-------------------
    mui.ready(function(){
        if(!info || (offset>=zong_tiaoshu)){
            $('#jz').css('display','none');
        }
        //给ul绑定点击事件,这里用mui的tag事件,不能用click
        mui('#info').on('tap','.ultype',abc);

        //侧滑容器父节点
        var offCanvasWrapper = mui('#offCanvasWrapper');
        //主界面容器
        var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
        //菜单容器
        var offCanvasSide = document.getElementById("offCanvasSide");
        //移动效果是否为整体移动
        var moveTogether = false;
        //点击开启侧滑功能
        document.getElementById('offCanvasShow').addEventListener('tap', function() {
            offCanvasWrapper.offCanvas('show');
        });
        document.getElementById('offCanvasHide').addEventListener('tap', function() {
            offCanvasWrapper.offCanvas('close');
        });
        //主界面和侧滑菜单界面均支持区域滚动；
        mui('#offCanvasSideScroll').scroll();
        mui('#offCanvasContentScroll').scroll();
        //实现ios平台的侧滑关闭页面；
        if (mui.os.plus && mui.os.ios) {
            offCanvasWrapper[0].addEventListener('shown', function(e) { //菜单显示完成事件
                plus.webview.currentWebview().setStyle({
                    'popGesture': 'none'
                });
            });
            offCanvasWrapper[0].addEventListener('hidden', function(e) { //菜单关闭完成事件
                plus.webview.currentWebview().setStyle({
                    'popGesture': 'close'
                });
            });
        }
       //给筛选条件里的更多绑定点击事件
        mui('.main').on('tap','.gdclick',gd_click);

        //重置表单
        document.getElementById('reset').addEventListener('tap',function(){
            $(":checkbox").prop("checked",false);
        })
    });

</script>
</body>
</html>